<template>
  <el-row :gutter="0" class="header-row" :align="'bottom'" :justify="'center'">
    <el-col :xs="24" :sm="12" style="text-align: left">
      <el-button type="text" icon="el-icon-menu" style="font-size: 14px; font-weight: bold"
        @click="goHome()">主页</el-button>
      <el-button type="text" icon="el-icon-mobile" style="font-size: 14px; font-weight: bold"
        @click="showAuthor = true">联系作者</el-button>
    </el-col>
    <el-col :xs="24" :sm="12" style="text-align: right">
      <!-- <el-tooltip content="点击充值!!!" placement="bottom" effect="light">  -->
      <el-button type="text" style="font-size: 14px; font-weight: bold; color: orange" v-if="logined"
        @click="goTo('/alipay', route.fullPath)">余额:￥{{ userInfo.amount }} </el-button>
      <!-- </el-tooltip> -->
      <el-divider direction="vertical" v-if="logined"></el-divider>
      <el-button type="text" icon="el-icon-chat-line-square" style="font-size: 14px; font-weight: bold" v-if="logined"
        @click="feedback()">反馈</el-button>
      <el-divider direction="vertical" v-if="logined"></el-divider>
      <el-button type="text" icon="el-icon-user" style="font-size: 14px; font-weight: bold" v-if="logined"
        @click="goTo('/userinfo', route.fullPath)">{{ userInfo.nickname }}</el-button>
      <el-divider direction="vertical" v-if="logined"></el-divider>
      <el-button type="text" icon="el-icon-close" style="font-size: 14px; font-weight: bold" v-if="logined"
        @click="Logout()">退出</el-button>
      <el-button type="text" icon="el-icon-user" style="font-size: 14px" @click="goTo('/login', route.fullPath)"
        v-else>登录</el-button>
    </el-col>
    <el-dialog title="微信添加作者咨询" v-model="showAuthor" :width="'300px'">
      <el-image :src="wechatUrl" :fit="contain"></el-image>
    </el-dialog>
  </el-row>
</template>

<script>
import { computed, toRefs, ref } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { ApiFeedback } from "@/http/api";
import { goTo } from "@/libs/utils";

export default {
  components: {},
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const showAuthor = ref(false);
    const wechatUrl =
      "https://yooongchun-blog-v2.oss-cn-beijing.aliyuncs.com/media/wechat-add-me.jpg";
    const Logout = () => {
      ElMessage.success("你已退出!");
      goTo();
      store.commit("clearInfo");
    };
    const goBlog = () => {
      window.location.href = "https://www.yooongchun.com";
    };

    const goHome = () => {
      router.replace("/");
    };
    const feedback = () => {
      ElMessageBox.prompt("向作者提交反馈信息或建议、意见", "提示", {
        confirmButtonText: "确定",
        inputType: "textarea",
        cancelButtonText: "取消",
        inputPattern: /.{5,1000}/,
        inputErrorMessage: "可以输入5~1000个字!",
      })
        .then(({ value }) => {
          ApiFeedback({ message: value }).then((res) => {
            if (res.code === 2000) {
              ElMessage.success("反馈成功!");
            } else {
              ElMessage.error(res.messgae);
            }
          });
        })
        .catch(() => {
          ElMessage("取消反馈!");
        });
    };
    const logined = computed(() => (store.state.userInfo ? true : false));
    return {
      ...toRefs(store.state),
      logined,
      showAuthor,
      wechatUrl,
      goTo,
      goBlog,
      route,
      Logout,
      feedback,
      goHome,
    };
  },
};
</script>

<style lang="less" scoped></style>
